<template>
  <div id="evaluationTasks">
    <div class="search">
      <el-form :inline="true" :model="searchFrom1" class="demo-form-inline">
        <el-col :span="7">
          <div class="searchSelect">
            <span>评估状态：</span>
            <el-select
              v-model="searchFrom1.pgzt"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="i in option"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="searchSelect">
            <span>评估阶段：</span>
            <el-select
              v-model="searchFrom1.pgjd"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in option1"
                :key="item.value + 2"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-form-item style="margin-left: 1rem">
          <el-button class="generalButton" icon="el-icon-search" @click="query"
            >查询</el-button
          >
          <el-button
            class="generalButton"
            icon="el-icon-refresh-right"
            @click="reset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-alert style="background: #e6f7ff" :closable="false">
        <span style="color: #64736c">已选择</span>
        <span style="color: #519df8">{{ selectData.length }}</span>
        <span style="padding-right: 1.3571rem; color: #64736c">项</span>
        <span style="color: #519df8; cursor: pointer" @click="clear()"
          >清空</span
        >
      </el-alert>
      <el-table
        v-if="tableData.length != 0"
        ref="multipleTable"
        :data="tableData"
        border
        :cell-style="cellStyle"
        highlight-current-row
        :header-cell-style="{
          background: '#2B69A6',
          color: '#fff',
          borderColor: '#BDE1FC',
        }"
        tooltip-effect="dark"
        style="width: 100%; margin-top: 0.8571rem"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column label="序号" type="index" width="80" align="center">
        </el-table-column>
        <el-table-column prop="rwmc" label="任务名称" align="center">
        </el-table-column>
        <el-table-column prop="pjsj" label="评价时间" align="center">
        </el-table-column>
        <el-table-column prop="pgjd" label="评估阶段" align="center">
        </el-table-column>
        <el-table-column prop="pjdd" label="评价地点" align="center">
        </el-table-column>
        <el-table-column prop="pglc" label="评估状态" align="center">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="padding-right: 0.5rem; border-right: 1px solid #f5f5f5"
              @click="pglc(scope.row)"
              >评估流程</el-button
            >
            <el-button
              type="text"
              style="padding-right: 0.5rem; border-right: 1px solid #f5f5f5"
              @click="addForm(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              style="padding-right: 0.5rem; border-right: 1px solid #f5f5f5"
              @click="handleEdit(scope.$index, scope.row)"
              >详情</el-button
            >
            <el-button
              type="text"
              style="padding-right: 0.5rem; border-right: 1px solid #f5f5f5"
              @click="down(scope.$index, scope.row)"
              >报告下载</el-button
            >
            <el-button
              type="text"
              style="padding-right: 0.5rem; border-right: 1px solid #f5f5f5"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :visible.sync="addzhuanjiaDialogVisible"
      width="50%"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div slot="title" class="title">
        <div><span>评估流程编辑</span></div>
      </div>
      <div class="content">
        <el-form
          ref="zhuanjiaform"
          :model="formdata"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="任务名称：">
            <el-input
              v-model="formdata.rwmc"
              placeholder="请输入任务名称"
              :rows="3"
            ></el-input>
          </el-form-item>
          <el-form-item label="评价时间：">
            <el-date-picker
              v-model="formdata.pjsj"
              type="date"
              placeholder="请选择开始日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="评估阶段：">
            <el-input
              v-model="formdata.pgjd"
              placeholder="请输入评估阶段"
              :rows="3"
            ></el-input>
          </el-form-item>
          <el-form-item label="评价地点：">
            <el-input
              v-model="formdata.pjdd"
              placeholder="请输入评价地点"
              :rows="3"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="contentButton">
          <el-button @click="close2">取消</el-button>
          <el-button class="generalButton" @click="sure">确定</el-button>
        </div>
      </span>
    </el-dialog>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.pageTotal"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getPgrw,
  delPgrw,
  downfile,
  editpgrw,
  queryfy,
  getcsdpglc,
} from "api/jscsdpg";

export default {
  components: {},
  data() {
    return {
      addzhuanjiaDialogVisible: false,
      // 选择列表
      option: [
        {
          value: 0,
          label: "未完成",
        },
        {
          value: 1,
          label: "已完成",
        },
      ],
      option1: [
        {
          value: 0,
          label: "初期",
        },
        {
          value: 1,
          label: "中期",
        },
        {
          value: 2,
          label: "终期",
        },
      ],
      // 选中表格多少跳
      selectData: [],
      // 分页
      pageInfo: {
        currentPage: 1,
        pageTotal: 100,
        pageSize: 5,
      },
      // 表单
      searchFrom: {},
      // 表单
      searchFrom1: {
        pgzt: null,
        pgjd: null,
      },

      // 表格
      tableData: [],
      formdata: {
        rwmc: "test",
        pjsj: "test",
        pgjd: "test",
        pjdd: "pjdd",
      },
    };
  },
    watch:{
      tableData(){
        this.tableData.forEach(el=>{
         
         if( el.pglc == '3'){
           el.pglc = '已完成'
         }else{
            el.pglc = '未完成'
         }
          if( el.pgjd == '0'){
           el.pgjd = '初期'
         }else if(el.pgjd == '1'){
            el.pgjd = '中期'
         }else{
            el.pgjd = '终期'
         }
        })
      }
  },
  methods: {
    pglc(val) {
      getcsdpglc(val.id).then((res) => {
        console.log(res);
        let data = res.data
        let id = res.data.estimate.id
        let pglc = res.data.estimate.pglc
        switch (pglc) {
        case "0":
          this.$router.push({
            path: "/startAssess",
            query: {
              data: JSON.stringify(data)
            },
          });
          break;
        case "1":
          this.$router.push({
            path: "/step2",
            query: {
              id,
              data: JSON.stringify(res.zjz),
            },
          });
          break;
        case "2":
          this.$router.push({
            path: "/step3",
            query: {
              id,
              data: JSON.stringify(data)
            },
          });
          break;
        default:
          this.$router.push({
            path: "/step4",
            query: {
              id
            },
          });
      }
      });
    },
    close2() {
      this.addzhuanjiaDialogVisible = false;
      this.getPgrw();
    },
    sure() {
      editpgrw(this.formdata.id, this.formdata).then((res) => {
        console.log(res);
      });
      this.addzhuanjiaDialogVisible = false;
    },
    addForm(data) {
      this.formdata = data;
      this.addzhuanjiaDialogVisible = true;
    },
    down(val, row) {
      console.log(row);
      downfile(row.id, 6).then((res) => {
        console.log(res);
        let blob = new Blob([res], {
          type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8",
        });
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.setAttribute("download", "评估报告.docx");
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(link.href);
        document.body.removeChild(link);
        // let objectUrl = URL.createObjectURL(blob);
        // window.location.href = objectUrl;
      });
    },
    handleEdit(val, row) {
      this.$router.push({
        path: "/step4",
        query: {
          id: row.id,
        },
      });
    },
    getPgrw() {
      getPgrw().then((res) => {
        console.log(res);
        this.tableData = res.data;
        this.pageInfo.currentPage = res.pageInfo.currentPage;
        this.pageInfo.pageTotal = res.pageInfo.totalCount;
        this.pageInfo.pageSize = res.pageInfo.pageSize;
      });
    },
    handleDelete(index, row) {
      //删除行数
      this.tableData.splice(index, 1);
      delPgrw(row.id).then((res) => {
        console.log(res);
      });
    },
    //重置
    reset() {
      this.getPgrw();
      this.searchFrom1.pgzt = null
      this.searchFrom1.pgjd - null
    },
    //查询
    query() {
      queryfy(
        this.pageInfo.currentPage,
        this.pageInfo.pageSize,
        this.searchFrom1.pgzt,
        this.searchFrom1.pgjd
      ).then((res) => {
        console.log(res);
        this.tableData = res.data;
        this.pageInfo.currentPage = res.pageInfo.currentPage;
        this.pageInfo.pageTotal = res.pageInfo.totalCount;
        this.pageInfo.pageSize = res.pageInfo.pageSize;
      });
    },
    // 风险评价按钮
    assessmentBtn() {
      this.$router.push({ path: "riskAssessment" });
    },
    // 新增按钮打开对话框
    addBtn() {
      this.addDialog = true;
    },
    // 关闭对话框
    closeDialog() {
      this.addDialog = false;
      this.proficiencyDialog = false;
      // console.log(this.addDialog)
    },
    // 清除选中项
    clear() {
      (this.selectData = []), this.$refs.multipleTable.clearSelection();
    },
    // 技术风险度评价按钮
    proficiencyBtn() {
      this.proficiencyDialog = true;
    },
    handleSelectionChange(val) {
      this.selectData = val;
    },
    // 更改边框颜色
    cellStyle() {
      return "border-color:#BDE1FC;";
    },
    // 页数总数改变
    handleSizeChange(val) {
      queryfy("", val, "", "").then((res) => {
        console.log(res);
        this.tableData = res.data;
        this.pageInfo.currentPage = res.pageInfo.currentPage;
        this.pageInfo.pageTotal = res.pageInfo.totalCount;
        this.pageInfo.pageSize = res.pageInfo.pageSize;
      });
    },
    // 当前页数改变
    handleCurrentChange(val) {
      console.log(val);
      queryfy(val, this.pageInfo.pageSize, "", "").then((res) => {
        console.log(res);
        this.tableData = res.data;
      });
    },
  },
  mounted() {
    this.getPgrw();
  },
};
</script>

<style lang="less" scoped>
#evaluationTasks {
  background: #fff;
  color: #000;
  padding: 1.4286rem;
}
.search {
  padding-bottom: 0.9286rem;
}
.demo-form-inline {
  width: 100%;
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #bde1fc;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #bde1fc;
}
.pagination {
  padding-top: 0.7143rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.searchSelect {
  display: flex;
  margin-left: 1rem;
  span {
    display: flex;
    align-items: center;
    width: 7.1429rem;
  }
}
</style>